<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>DataForm with TabView</title>
<!-- DPU RowFilterTable source (extends YUI version) -->
<style type="text/css">
    /*custom css*/
    body {font-family:arial}

    /*CSS FOR DataTable */
    .dpu-dt {margin:1em;}
    .dpu-dt table {border-collapse:collapse;}
    .dpu-dt th, .dpu-dt td {border:1px solid #000;padding:.25em;}
    .dpu-dt th {background-color:#BEDAFF}
    .dpu-dt.yui-dt-odd {background-color:#eee;} /*light gray*/
    .dpu-dt em {font-style:italic;}
    .dpu-dt strong {font-weight:bold;}
    .dpu-dt .big {font-size:136%;}
    .dpu-dt .small {font-size:77%}
    .dpu-dt .yui-dt-selected {background-color:#000;color:#FFF;} /*white on black*/
    .dpu-dt .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/

    /*CSS For Auto Complete*/
    .filter {position:relative;padding:1em;}
    .filterForm {position:relative;margin:1em;width:15em;}/* set width of widget here*/
    .filterInput {position:absolute;width:100%;height:1.4em;}
    .filterMatch {position:absolute;top:1.7em;width:100%;}
    .filterMatch .yui-ac-content {position:absolute;width:100%;height:11em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
    .filterMatch .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    .filterMatch ul {padding:5px 0;width:100%;}
    .filterMatch li {padding:0 5px;cursor:default;white-space:nowrap; font-size:small}
    .filterMatch li.yui-ac-highlight {background:#ff0;}

    /*custom css*/
    #contextmenu {margin:1em;}
    #contextmenu table {border-collapse:collapse;}
    #contextmenu th, #contextmenu td {border:1px solid #000;padding:.25em;}
    #contextmenu th {background-color:#696969;color:#fff;}/*dark gray*/
    #contextmenu .yui-dt-odd {background-color:#eee;} /*light gray*/

</style>
<!-- DataTable/DataForm -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">
<!-- TabView -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">
<!-- LogReader -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css">

</head>
  <body>

    <p>
      Welcome to the DataForm test page.
    </p>

    <ul>
      <li>
        A DataForm edits a single record at a time in a vertical form, as opposed to a tabular format.
        It is a custom Yazaar widget designed to complement the YUI DataTable.
        A DataForm can share a DataSource and ColumnSet with a DataTable, so that the two widgets can be used in tandem.
      </li>
      <li>
        A <a href="http://code.google.com/p/yazaar/issues/detail?id=4">FLEV widget</a> is being designed which uses a DataForm, DataTable, and TabView to create a unified Find, List, Edit, View workflow. (See the <a href="../phonebook/Home.html">PhoneBook example</a>.)
      </li>
      <li>
        This example utilizes the test data from the <a href="http://developer.yahoo.com/yui/datatable/">DataTable</a> documentation, but adds support for select and checkbox controls.
      </li>
      <li>
        The example also demonstrates unobstrusive validation. On the Edit tab, the weeks field will only accept a number.
      </li>
      <li>
        To delete or insert an entry, "right-click" on an entry to bring up a context menu.
      </li>
    </ul>

    <hr />

    <table cellspacing="16">
      <tr><td valign="top" width="98%">
        <div id="elTabView" class="yui-navset">
            <ul class="yui-nav">
                <li class="selected"><a href="#list"><em>List (DataTable)</em></a></li>
                <li><a href="#edit"><em>Edit (DataForm)</em></a></li>
            </ul>
            <div class="yui-content">
        <div id="elList">
          <div class="filter">
                <form >
                    <p style="font-weight:bold">Find an order by:
                    <select id="item" onchange="onFilterChange()">
                        <option value="breed">Breed</option>
                        <option value="name" selected="true">Name</option>
                    </select>
                    </p>
                    <div class="filterForm">
              <p>
                        <input class="filterInput" id="input" />
                        <div class="filterMatch" id="match"></div>
              </p>
                    </div>
                </form>
              </div>
                  <div id="elDataTable" class="dpu-dt"></div>
        </div>
        <div id="elEdit">
                <div id="elDataForm"></div>
        </div>
            </div>
        </div>
      </td><td>
        <div id="elLogReader"></div>
      </td></tr>
    </table>

  </body>

<!-- Patch for IE setAttribute issue [http://delete.me.uk/2004/09/ieproto.html] -->
<!--[if IE]>
    <script type="text/javascript" src="../../build/extras/ieproto/attributes.js"></script>
    <style type="text/css">
        * { behavior: url(../../build/extras/ieproto/attributes.htc); }
    </style>
<![endif]-->

<!-- DataTable/DataForm -->
<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://www.json.org/json.js"></script>
<!-- YUI Source files -->
<script src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
<script src="../../build/patched/datatable-beta-debug-patched.js"></script>
<!-- Autocomplete -->
<script src="http://yui.yahooapis.com/2.2.2/build/autocomplete/autocomplete-min.js"></script>
<!-- Yazaar Source files -->
<script src="../../build/dataform/dataform-debug-beta.js"></script>
<!-- OPTIONAL: jc21 validator -->
<script src="../../build/extras/jc21/validate-min.js"></script>
<!-- LogReader -->
<script src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script>

<!-- DPU RowFilterTable source (extends YUI version) -->
<script src="../../build/extras/dpu/RowFilterDataTable.js" ></script>
<script src="../../build/extras/dpu/RowFilter.js" ></script>

<!-- TabView -->
<script src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script>
<!-- Source file -->
<script src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script>

<!-- Context Menu-->
<script src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"type="text/javascript" ></script>
<script src="http://yui.yahooapis.com/2.2.2/build/menu/menu-min.js"type="text/javascript" ></script>

<!-- tutorial -->
<script src="tutorial-data.js"></script>
<script type="text/javascript">
var oDataTable = new YAHOO.dpu.widget.DataTable("elDataTable", oColumnSet, oDataSource, {rowSingleSelect: true});
</script>
<script src="tutorial.js"></script>

<script type="text/javascript">
var oTabView = new YAHOO.widget.TabView("elTabView");

// Goto to DataForm
var onRecordSelectEvent = function () {
  oDataForm.populateForm();
  oTabView.set('activeIndex', 1);
}
oDataTable.subscribe("recordSelectEvent", onRecordSelectEvent);

// Goto to DataForm
var doInsertFormEvent = function () {
  oDataForm.insertForm();
  oTabView.set('activeIndex', 1);
}
oDataTable.subscribe("insertFormEvent", doInsertFormEvent);

// Goto DataTable
var onRecordActionEvent = function () {
  oTabView.set('activeIndex', 0);
}
oDataForm.subscribe("cancelEvent", onRecordActionEvent);
oDataForm.subscribe("insertEvent", onRecordActionEvent);
oDataForm.subscribe("updateEvent", onRecordActionEvent);

// Prompt before changing tabs
var onBeforeActiveTabChange = function(e) {
  var isChanged = oDataForm.isRecordChanged();
  if (isChanged) {
    return (confirm("Exit form without saving?"));
  } else {
    return true;
  }
};
oTabView.on('beforeActiveTabChange', onBeforeActiveTabChange);

// Set flag when form is in view
var onActiveTabChange = function(e) {
    oDataForm.isActive = (1==oTabView.get('activeIndex'));
}
oTabView.on('activeTabChange', onActiveTabChange);

// Setup filter
var fnFilter = null;
function initFilter(oResp,oDataTable){
    var data = null;
    if (oResp) {
        data=oResp.response;
    } else {
        data =  YAHOO.example.oPuppies; // TODO: Datasource?
    }
    fnFilter= new YAHOO.dpu.util.StringFilter(data,"name")
    fnFilter.maxCacheEntries = 0;
    oAutoComp = new YAHOO.dpu.widget.RowFilter("input","match", oDataTable,fnFilter);
    var ua = navigator.userAgent.toLowerCase();
    if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
        oAutoComp.useIFrame = true;
    }
}
oDataTable.subscribe("dataReturnEvent",initFilter,oDataTable);
YAHOO.util.Event.onAvailable("elDataTable", function(){initFilter(null,oDataTable)});

// Respond to filter change button
function onFilterChange() {
    var el = document.getElementById("item");
    var item = el.options[el.selectedIndex].value;
    fnFilter.schemaItem = item;
}

</script>

</html>
